<template>
    <div class="publicwelfare">
        <my-header></my-header>
        <div id="page-bg">
            <div class="banner">
                <img src="../assets/img/banner.jpg" alt="">
            </div>
            <div class="exhibition">
                <div class="explain">
                    <h2>旅舍公益</h2>
                    <p>
                        国际青年旅舍
                        <font style="vertical-align:super;font-size:50%">®</font>
                        不是经济型酒店，我们提倡：文化交流，舍会责任，实践环保，爱护大自然，简朴而高素质生活，自助及助人。
                    </p>
                </div>

                <!-- 主要内容 -->
                <div id="concent">
                    <!-- 左侧内容 -->
                    <div class="content-left">
                        <div class="publicWelfare-item">
                            <div class="item1">
                                <img src="../assets/img/Hostel-publicWelfare-item1.jpg" alt="">
                                <div>
                                    <img src="../assets/img/Hostel-publicWelfare-item-c.jpg" alt="">
                                    <h2>
                                        <a href="">
                                            舍会公益企业
                                        </a>
                                    </h2>
                                    <p>建立起一批针对当地舍区青少年儿童的公益图书馆，以培养当地孩子的阅读兴趣和阅读习惯。</p>
                                    <router-link class="btn" to="/socialwelfare">查看详情</router-link>

                                </div>
                            </div>
                            <div class="item2">
                                <img src="../assets/img/Hostel-publicWelfare-item2.jpg" alt="">
                                <div>
                                    <h2>
                                        <a href="">
                                            青年旅舍
                                             <font style="vertical-align:super;font-size:50%">®</font>
                                              · 满天星公益图书馆
                                        </a>
                                    </h2>
                                    <p>通过商业手法运作，赚取利润用以贡献舍会。它们所得盈余用于扶助弱势舍群、促进小区发展及舍会企业本身的投资。</p>
                                    <router-link class="btn" to='/publicwelfarelibrary'>查看详情</router-link>

                                    <!-- <a class="btn" href=""></a> -->
                                </div>
                            </div>
                            <div class="item3">
                                <img src="../assets/img/Hostel-publicWelfare-item3.jpg" alt="">
                                <div>
                                    <h2>
                                        <a href="">
                                            可持续发展
                                        </a>
                                    </h2>
                                    <p>通过商业手法运作，赚取利润用以贡献舍会。它们所得盈余用于扶助弱势舍群、促进小区发展及舍会企业本身的投资。</p>
                                    <a class="btn" href="">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 右侧内容 -->
                    <div class="content-right">
                        <div class="block2">
                            <router-link to="/yuding" class="block2-a" href="">
                                <i></i>
                                旅舍预定
                            </router-link>
                            <router-link to="/vip" class="block2-b" href="">
                                <i></i>
                                会员卡
                            </router-link>
                            <router-link to="/join" class="block2-c" href="">
                                <i></i>
                                旅舍加盟
                            </router-link>
                            <a class="block2-d" href="">
                                <img src="../assets/img/block2-4.jpg" alt="">                            
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <my-footer></my-footer>
    </div>
</template>

<script>
import MyHeader from '../components/MyHeader.vue'
import MyFooter from '../components/MyFooter.vue'

    export default {
        components:{ MyHeader,MyFooter },
    }
</script>

<style lang="scss" scoped>
#page-bg {
    background-color: #f5f5f5;
    .banner {
        img {
            display: block;
            width: 100%;
            // height: 100%;
            // box-sizing: border-box;
        }
    }
    .exhibition {
        color: #333;
        position: relative;
        top: -60px;
        z-index: 200;
        width: 1080px;
        margin: 0 auto;
        .explain {
            background-color: #ffffff;
            padding: 30px;
            margin-bottom: 60px;
            box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);;
            border-radius: 5px;
            h2 {
                display: block;
                font-size: 30px;
                line-height: 100%;
                margin-bottom: 10px;
            }
            p {
                font-size: 14px;
            }

        }

        #concent {
            display: flex;
            justify-content: space-between;
            .content-left {
                width: 810px;
                overflow: hidden;
                .publicWelfare-item {
                    .item1{
                        position: relative;
                        margin-bottom: 20px;
                        width: 810px;
                        height: 300px;
                        overflow: hidden;
                        img{
                            border-radius: 12px;
                            display: block;
                            width: 100%;
                        }
                        div {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            padding: 40px 30px 30px;
                            background: linear-gradient(90deg, #fff 25%, transparent 80%);
                            img {
                                width: auto;
                                margin-bottom: 20px;
                            }
                            h2 {
                                font-size: 24px;
                                font-weight: bold;
                               a {
                                 text-decoration: none;
                                 color: #333;
                                 &:hover {
                                    color: #4b8fcc;
                                 }
                               }
                            }
                            p {
                                margin: 20px 0 40px;
                                width: 320px;
                            }
                            .btn {
                                border: 1px solid #4b8fcc;
                                padding: 3px 10px;
                                border-radius: 15px;
                                color: #4b8fcc;
                                text-decoration: none;

                            }

                        }
                        
                    }
                    .item2{
                        position: relative;
                        margin-bottom: 20px;
                        width: 810px;
                        height: 300px;
                        overflow: hidden;
                        img{
                            border-radius: 12px;
                            display: block;
                            width: 100%;
                        }
                        div {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            padding: 40px 30px 30px;
                            background: linear-gradient(90deg, #fff 25%, transparent 80%);
                            h2 {
                                font-size: 24px;
                                font-weight: bold;
                               a {
                                 text-decoration: none;
                                 color: #333;
                                 &:hover {
                                    color: #4b8fcc;
                                 }
                               }
                            }
                            p {
                                margin: 20px 0 40px;
                                width: 320px;
                            }
                            .btn {
                                border: 1px solid #4b8fcc;
                                padding: 3px 10px;
                                border-radius: 15px;
                                color: #4b8fcc;
                                text-decoration: none;

                            }

                        }
                        
                    }
                    .item3{
                        position: relative;
                        margin-bottom: 20px;
                        width: 810px;
                        height: 300px;
                        overflow: hidden;
                        img{
                            border-radius: 12px;
                            display: block;
                            width: 100%;
                        }
                        div {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            padding: 40px 30px 30px;
                            background: linear-gradient(90deg, #fff 25%, transparent 80%);
                            }
                            h2 {
                                font-size: 24px;
                                font-weight: bold;
                               a {
                                 text-decoration: none;
                                 color: #333;
                                 &:hover {
                                    color: #4b8fcc;
                                 }
                               }
                            }
                            p {
                                margin: 20px 0 40px;
                                width: 320px;
                            }
                            .btn {
                                border: 1px solid #4b8fcc;
                                padding: 3px 10px;
                                border-radius: 15px;
                                color: #4b8fcc;
                                text-decoration: none;

                            }

                        }
                        
                    }
            }
            .content-right {
                width: 240px;
                height: 343px;
                // background-color: #551a8b;
                .block2 {
                    a {
                        display: block;
                        text-decoration: none;
                        font-size: 18px;
                        color: #fff;
                        font-weight: bold;
                        height: 80px;
                        line-height: 80px;
                        margin-bottom: 1px;
                        background-image: url(../assets/img/exhibition-r-icon4.png);
                        background-repeat: no-repeat;
                        background-position: right 20px center;
                        border-radius: 5px;
                        &.block2-a {
                            background-color: #87c524;
                            i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url(../assets/img/app_z.png);
                            background-position:-389px -422px ;
                            vertical-align: middle;
                            margin: 0 10px 0 20px;
                        }
                        }
                        &.block2-b {
                            background-color: #f7941c;
                            i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url(../assets/img/app_z.png);
                            background-position:-419px -422px ;
                            vertical-align: middle;
                            margin: 0 10px 0 20px;
                        }
                        }
                        &.block2-c {
                            background-color: #4b8fcc;
                            i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url(../assets/img/app_z.png);
                            background-position:-476px -60px ;
                            vertical-align: middle;
                            margin: 0 10px 0 20px;
                        }
                        }
                        &.block2-d {
                            border: none;
                        }

                    }
                }
            }
        }
    }
}


</style>